<template>
  <div class="parrent-container">
    <van-tabs v-model="active">
      <van-tab title="基础操作">
        <div class="teach-info">
          <div class="teach-row">
            <div class="teach-col">
              <div style="padding:6px 0;">
                <img class="user-img" :src="user.icon" alt="">
              </div>
              <div class="teach-text">姓名:{{ user.realname }}</div>
              <!-- mobile  adviser_mobile-->
              <div class="teach-text">电话:{{ user.adviser_mobile }}</div>
            </div>
            <div class="teach-col1">
              <div class="teach-code">
                <img :src="codeSrc" id="ewm" alt="">
                <div class="teach-code-text">博瑞智教育顾问：{{ user.mobile }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="info-box">
          <div class="info-text">长按上面的二维码，发送给您的家长或朋友圈既可完成绑定，长按二维码保存相册！</div>
          <div class="info-text">如果尝试绑定不成功，则说明家长已被他人绑定</div>
        </div>
        <div style="padding:0.3rem;font-weight: bold;font-size:0.3rem;">备注</div>
        <div class="info-text1">当你发现你要绑定的家长未被绑定成功时，有两种可能，一种是家长操作失误，
          没有成功，重复操作即可，另一种可能就是该家长已被其他顾问老师绑定，你可以使用综合工具里面的，冲突申诉功能检索一下这个家长目前归属，且可以填表申诉
        </div>
      </van-tab>
      <van-tab title="视频教学">
        <video-play :video-poster="data.poster" :on-off="(active == 0?false:true)" :video-src="data.src" :is-auto-play="false" ref="vidoePlay"/>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { Tabs, Tab, Button } from 'vant';
import videoPlay from '@/components/videoPlay/videoPlay.vue'
export default {
  components: { videoPlay,[Tabs.name]: Tabs, [Tab.name]: Tab, [Button.name]: Button },
  data() {
    return {
      active: '1',
      baseBtn: false,
      videoBtn: true,
      lookVideo: '',
      user: '',
      codeSrc: '',
      data: this.$API.BIND_PARENTS_VIDEO
    };
  },
  created() {
    this.initAjaxMethod();
  },
  methods: {
    initAjaxMethod() {
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.SET_PEROFFICE_BINDPARENT, { id: this.id })
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            this.user = res.data || {};
            this.codeSrc = res.qr_code.data;
          }
        });
    },
  }
};
</script>

<style lang="less">
.parrent-container {
  .teach-info {
    padding: 0.3rem;
    border-radius: 0.12rem;
    background: #fff;
    width: 90%;
    margin: 0.3rem auto;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  }
  .van-tab{
    font-size: 0.3rem;
  }
  .teach-row {
    display: flex;
    align-items: center;
  }

  .teach-col {
    width: 55%;
  }

  .teach-col1 {
    width: 45%;
  }

  .user-img {
    height: 0.8rem;
    width: 0.8rem;
    border-radius: 50%;
  }

  .teach-text {
    font-size: 0.28rem;
    padding: 0.12rem 0;
  }

  .teach-code {
    background: #fff;
    padding: 0.12rem;
  }

  .teach-code img {
    width: 100%;
    height: auto;
  }

  .teach-code-text {
    text-align: center;
    font-size: 0.28rem;
  }

  .info-box {
    padding: 0.3rem;
  }

  .info-text {
    padding: 0.16rem 0;
    line-height: 0.6rem;
    font-size:0.3rem;
    text-indent: 0.4rem;
  }

  .info-text1 {
    padding: 0 5%;
    line-height: 0.6rem;
    font-size:0.3rem;
    color: #888;
    text-indent: 0.4rem;
  }
}
</style>